<template>
  <view
    :class="{
      [ns.e('placeholder')]:
        fixed && placeholder && safeAreaInsetBottom && shape === 'round',
    }"
    :style="{ height: Number.isNaN(Number(num)) ? `${num}` : `${num}px` }"
  >
    <view
      :class="`${ns.b()} ${ns.m(shape)} ${customClass} ${ns.is(
        'fixed',
        fixed
      )} ${ns.is('safe', safeAreaInsetBottom)} ${ns.is('border', bordered)}`"
      :style="rootStyle"
    >
      <slot></slot>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script lang="ts" setup>
import {
  ref,
  watch,
  nextTick,
  computed,
  onMounted,
  getCurrentInstance,
} from "vue";
import { getRect } from "@/utils";
import { useNamespace, useChildren } from "@/use";
import { TABBAR_KEY, tabbarProps } from "./i-biz-tabbar";
import { isNil } from "ramda";
import { TabbarItem } from "../tabbar-item/i-biz-tabbar-item";

const ns = useNamespace("tabbar");
const props = defineProps(tabbarProps);

const emit = defineEmits(["change", "update:modelValue"]);

const height = ref<number | string>("");
const { proxy } = getCurrentInstance();

const { linkChildren } = useChildren(TABBAR_KEY);

const rootStyle = computed(() => {
  return `${!isNil(props.zIndex) ? `z-index: ${props.zIndex}` : ""};${
    props.customStyle
  }`;
});

const setPlaceholderHeight = () => {
  if (!props.fixed || !props.placeholder) {
    return;
  }

  getRect(".ibiz-tabbar", false, proxy).then((res) => {
    height.value = Number(res.height);
  });
};

const setChange = (child: TabbarItem) => {
  let active = child.name;
  emit("update:modelValue", active);
  emit("change", active);
};

linkChildren({
  props,
  setChange,
});

watch(
  [() => props.fixed, () => props.placeholder],
  () => {
    setPlaceholderHeight();
  },
  { deep: true, immediate: false }
);

onMounted(() => {
  if (props.fixed && props.placeholder) {
    nextTick(() => {
      setPlaceholderHeight();
    });
  }
});
</script>
<style lang="scss" scoped>
@include b(tabbar) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  background: getCssVar(color, white);
  height: 50px;

  @include e(placeholder) {
    padding-bottom: 0px;
  }

  @include m(round) {
    margin-left: 32px;
    margin-right: 32px;
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 30px 5px,
      rgba(0, 0, 0, 0.04) 0px 16px 24px;

    @include when(fixed) {
      @include when(safe) {
        bottom: 0px;
      }
    }
  }

  @include m(default) {
    @include when(fixed) {
      @include when(safe) {
        padding-bottom: 0px;
      }
    }

    @include when(border) {
      position: relative;
      &::after {
        content: "";
        width: 100%;
        top: 0;
        display: block;
        position: absolute;
        transform: scaleY(0.5);
        background: getCssVar(border, color);
      }
    }
  }

  @include when(fixed) {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    position: fixed;
  }
}
</style>
